<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据集</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/nprogress/nprogress.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>数据集管理</cite></a>
                <a><cite>文件夹</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>
        <!--模糊搜索区域-->
        <!-- <div class="layui-row ok-search">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
            <div class="layui-inline">
                <input class="layui-input" name="id" id="resourcename" autocomplete="off" placeholder="检索资源名称">
            </div>
            <button class="layui-btn" data-type="reload" id="search">搜索</button>
        </div> -->
        <form class="layui-form ok-search">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input class="layui-input" name="id" id="resourcename" autocomplete="off" placeholder="检索资源名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" data-type="reload" id="search">搜索</button>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">文件显示</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="showfile" id="showfile" lay-skin="switch" lay-text="ON|OFF">
                    </div>
                </div>
            </div>
        </form>
        <!--工具栏-->
        <okToolbar>
            <!--   <button class="layui-btn layui-btn-normal" id="batchEnabled">
                <i class="iconfont icon-shangsheng"></i>批量启用
            </button>
            <button class="layui-btn layui-btn-warm" id="batchDisabled">
                <i class="iconfont icon-web-icon-"></i>批量停用
            </button>
            <button class="layui-btn layui-btn-danger" id="batchDel">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button> -->
            <button class="layui-btn layui-btn-sm" id="add">
                <i class="layui-icon">&#xe61f;</i>确认选取
            </button>
            <button class="layui-btn layui-btn-sm" id="back"><i class="layui-icon"></i>返回上级目录</button>
            <span>共有数据：<i id="countNum">0</i> 条</span>
        </okToolbar>
        <!--数据表格-->
        <table class="layui-hide" id="mytable" lay-filter="mytable"></table>
        <input class="layui-hide" id='id' value="">
        <fieldset class="layui-elem-field site-demo-button" id="checkedFolders">
            <legend>已选择的文件夹</legend>
            <div class="layui-btn-group" style="margin: 10px;">
                <button class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
            </div>
        </fieldset>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/nprogress/nprogress.js"></script>
    <script>
        NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(['element', 'table', 'form', 'jquery','laydate'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startTime',
            type: "datetime"
        });

        laydate.render({
            elem: '#endTime',
            type: "datetime"
        });
        table.render({
            elem: '#mytable',
            url: '/dataset/fslist',
            limit: 65535,
            cellMinWidth: 80, 
            page: true,
            id:'folderlist',
            where:{
                resourceid:resourceid,
                showfile:$('#showfile')[0].checked
            },
            cols: [[
            {type:'radio'},   
              /*   {title: '操作', templet: '#operationTpl', align: 'center'}, */
                {field: 'resourceid', title: 'ID', width: 80},
                {field: 'resourcename', title: '文件(夹)名'},
                {field: 'path', title: '资源路径'},         
                {field: 'resourcetype', title: '类型',templet: '#typeTpl'},
                {field: 'createat', title: '创建时间',sort: true}
            ]],
            done: function (res, curr, count) {
                $("#countNum").text(count);
                
            }
        });

        var active = {
            reload: function(resourceid){
                //console.log('resourceid='+resourceid);
                var resourcename = $('#resourcename').val();
                var start=$('#startTime').val();
                var end=$('#endTime').val();
                
                //执行重载
                table.reload('folderlist', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key:{
                            resourcename:resourcename,
                            start:start,
                            end:end                         
                        },
                        resourceid:resourceid||'-1',
                        showfile:$('#showfile')[0].checked
                    }
                });
            }
        };

        $('#search').on('click', function(){
            console.log('文件显示状态：'+$('#showfile')[0].checked);
            /* var type = $(this).data('type');
            active[type] ? active[type].call(this) : ''; */
            resourceid='-1';
            active.reload(resourceid);
            return false;
        });
        $('#resourcename').on('keydown',function(e){
            if(e.keyCode=='13'){
                $('#search').click();
            }
        });

       /*  table.on('tool(mytable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'bind') {
                layer.open({
                    title: '文件上传',
                    type: 2,
                    shade: false,
                    maxmin: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: '/fdm/upload',
                    zIndex: layer.zIndex,
                    end: function () {
                        $(".layui-laypage-btn")[0].click();
                    },
                    success:function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //console.log(body.find('#guestid').val());
                        body.find('#folderid').val(data.folderid);
                        console.log(body.find('#folderid').val());
                    }
                });
            } else if (layEvent === 'list') {
                layer.open({
                    title: '文件列表',
                    type: 2,
                    shade: false,
                    maxmin: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: '/fdm/resource',
                    zIndex: layer.zIndex,
                    end: function () {
                        $(".layui-laypage-btn")[0].click();
                    },
                    success:function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //console.log(body.find('#guestid').val());
                        body.find('#id').val(data.folderid);
                        console.log(body.find('#id').val());
                    }
                });
            }
        }); */


         $("#add").click(function () {
             //获取选中的数据行
             var checkStatus = table.checkStatus('folderlist');
             var data = checkStatus.data;
             if(data.length==0){
                 layer.msg('请选择目标文件夹');
                 return false;
             }
             var folderids=[];
             data.forEach(element => {
                folderids.push(element.resourceid);
             });
             console.log(folderids);
             //layer.msg('数据处理可能需要一定的时间，请稍候...');
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                //,btn: ['火速围观', '残忍拒绝']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>我正在努力的处理中...</br><br>每一次都是浩瀚数据的汇集，短暂等待只为更佳美好的呈现</br><br>处理完毕后我将消失不见...</br><br>我们此后的征途是星辰大海 ^_^</br></div>'
                /* ,success: function(layero){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.layui.com/'
                        ,target: '_blank'
                    });
                } */
            });
             //提交选择信息
             $.ajax({
                    url: '/dataset/bindfolders',
                    method: 'post',
                    data: {dsid:$('#id').val(),ids:folderids,dstype:1},
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {                            
                            layer.msg('操作成功');
                            parent.layer.closeAll();
                        } else if (res.code == -1)  {
                            layer.msg('不能重复添加');
                        }else{
                            layer.msg('操作失败');
                        }
                    },
                    error: function (data) {}
                }); 
        });

        var resourceid='-1';
        var action_resourceid=['-1'];//记录操作路径
        $('#back').hide();
         //监听行双击事件（单击事件为：rowDouble）
        table.on('rowDouble(mytable)', function(obj){
            var data = obj.data;
            resourceid=data.resourceid;
           
            $('#resourcename').val('');
               $('#startTime').val('');
                $('#endTime').val('');
                //console.log('resourceid='+resourceid);
                //console.log(action_resourceid);
                if(action_resourceid.length==0){
                    $('#back').hide();
                }else{
                    $('#back').show();
                }
            if(data.resourcetype!='1'){
                action_resourceid.push(resourceid);
                active.reload(resourceid);   
            }             
        });

        //监听行单击事件（单击事件为：rowDouble）
        /* table.on('row(mytable)', function(obj){
            //获取选中的数据行
            var checkStatus = table.checkStatus('folderlist');
            var data = checkStatus.data;

            layer.alert(JSON.stringify(data));
            console.log(data);
                
        }); */

         $("#back").click(function () {
            $('#resourcename').val('');
               $('#startTime').val('');
                $('#endTime').val('');
                action_resourceid.pop();
                resourceid=action_resourceid.pop();
                if(action_resourceid.length==0){
                    action_resourceid=['-1'];
                    $('#back').hide();
                }else{
                    $('#back').show();
                }
                //console.log('resourceid='+resourceid);
                //console.log(action_resourceid);

                active.reload(resourceid);   
            
        });
        

        /* table.on('checkbox(mytable)', function(obj){

            //获取选中的数据行
             var checkStatus = table.checkStatus('folderlist');
            var data = checkStatus.data;
            
            console.log(data); 

            //选中后加入选择集合中
            if(obj.checked){
                if(obj.type=='one'){
                    $('#checkedFolders').append('<div class="layui-btn-group" style="margin: 10px;" id="resource'+obj.data.resourceid+'">'+
                    '<button class="layui-btn layui-btn-primary layui-btn-sm">'+obj.data.resourcename+'</button>'+
                    '<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>'+
                    '</div>');
                }
            } else{
                $('#resource'+obj.data.resourceid).remove();
            }
        
        }); */
  
 
    })
</script>
    <!--模板-->
    <script type="text/html" id="statusTpl">
        <a href="javascript:;" title="状态" class="layui-btn layui-btn-xs  {{ d.status== 1? 'layui-bg-green' : 'layui-bg-orange'}} ">{{ d.status== 0 ? '未完成' : '已完成'}}
        </a>
   
</script>

    <script type="text/html" id="typeTpl">
        <a href="javascript:;" title="类型"  class="layui-btn layui-btn-xs {{ d.resourcetype== '1' ? 'layui-bg-black' : 'layui-bg-blue'}}">{{ d.resourcetype== '1' ? '文件' : '目录'}}
           </a>
</script>

    <script type="text/html" id="operationTpl">
        <!--  <a href="javascript:;" title="上传文件" lay-event="bind" class="layui-btn layui-btn-xs layui-bg-blue">绑定源</a>
        <a href="javascript:;" title="文件列表" lay-event="list" class="layui-btn layui-btn-xs layui-bg-blue">设置</a>
        <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a> -->
</script>
</body>

</html>